<template>
	<view class="content">
		<view class="selectBox">
			<text>故事板</text>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<!-- <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
				<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
				<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> -->
				<image-item v-for="(item,index) in imageUrlList" :key="index" :item="item"
					class="scroll-view-item_H"></image-item>

			</scroll-view>
		</view>

		<view class="selectBox">
			<text>时间线</text>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<!-- <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
				<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
				<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> -->
				<image-item v-for="(item,index) in imageUrlList1" :key="index" :item="item"
					class="scroll-view-item_H"></image-item>

			</scroll-view>
		</view>

		<view class="selectBox">
			<text>智能推荐</text>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<!-- <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
				<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
				<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view> -->
				<image-item v-for="(item,index) in imageUrlList2" :key="index" :item="item"
					class="scroll-view-item_H"></image-item>

			</scroll-view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	let imageUrlList = ref([
		'../../common/images/头像1.jpg',
		'../../common/images/照片2.jpg',
		'../../common/images/照片4.jpg',
		'../../common/images/照片5.jpg',
		'../../common/images/照片6.jpg',
		'../../common/images/画板 2（3）.png',
		'../../common/images/画板 2（4）.png',
		'../../common/images/画板 2.png',
		'../../common/images/画板 2（1）.png',
		'../../common/images/画板 2（2）.png',
		'../../common/images/画板 2（3）.png',
		'../../common/images/画板 2（4）.png'
	])

	let imageUrlList1 = ref([
		'../../common/images/画板 2（3）.png',
		'../../common/images/画板 2（4）.png',
		'../../common/images/画板 2.png',
		'../../common/images/画板 2（1）.png',
		'../../common/images/画板 2（2）.png',
		'../../common/images/画板 2（3）.png',
		'../../common/images/画板 2（4）.png',
		'../../common/images/头像1.jpg',
		'../../common/images/照片2.jpg',
		'../../common/images/照片4.jpg',
		'../../common/images/照片5.jpg',
		'../../common/images/照片6.jpg'
	])

	let imageUrlList2 = ref([
		'../../common/images/照片5.jpg',
		'../../common/images/照片6.jpg',
		'../../common/images/画板 2（2）.png',
		'../../common/images/画板 2（3）.png',
		'../../common/images/画板 2（4）.png',
		'../../common/images/头像1.jpg',
		'../../common/images/照片2.jpg',
		'../../common/images/照片4.jpg',
		'../../common/images/照片5.jpg',
		'../../common/images/照片6.jpg',
		'../../common/images/画板 2（3）.png',
		'../../common/images/画板 2（4）.png',
		'../../common/images/画板 2.png',
		'../../common/images/画板 2（1）.png'
	])
</script>

<style lang="scss" scoped>
	.content {
		margin-top: 30rpx;
		padding: 0 16rpx;
		// column-count: 3;
		// column-gap: 2px;
		// border: 1px solid red;
		height: 1000rpx;
		width: 100%;
		// overflow: hidden;
		// display: flex;
		// justify-content: space-around;
		// justify-items: center;
		// flex-wrap: wrap;

		.selectBox {
			margin-bottom: 30rpx;

			text {
				font-size: 36rpx;
				font-weight: bold;
			}

			.scroll-view_H {
				// border: 1rpx solid red;
				white-space: nowrap;
				width: 100%;
				margin-top: 30rpx;
				// display: flex;
				// justify-content: space-around;
				// justify-items: center;
				// flex-wrap: wrap;
			}



			.scroll-view-item_H {
				// border: 1rpx solid red;
				margin-right: 5rpx;
				display: inline-block;
				// width: 100%;
				// height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
				width: 300rpx;
				height: 300rpx;
			}
		}

	}
</style>